import React, { Component } from 'react';
import ReactECharts from 'echarts-for-react';
import { Col, Icon } from 'antd';
import styled from 'styled-components';

const ChartTitle = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;

  .label {
    color: #464646;
    margin-left: 9px;
    font-weight: 700;
    font-size: 16px;
  }

  .previewIcon {
    margin-left: 8px;
    font-size: 16px;
    color: #464646;
    cursor: pointer;
  }
`;

class BarChartView extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  render() {
    const { record } = this.props;

    const echartOptions = {
      // title: {
      //   text: this.getValBy({ key: 'org_name' }),
      //   subtext: `${this.getValBy({ key: 'upload_year' })}年度 ${this.getValBy({
      //     key: 'province_name',
      //   })} ${this.getValBy({ key: 'city_name' })} ${this.getValBy({ key: 'region_name' })}`,
      //   left: '50%',
      //   textAlign: 'center',
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function(params) {
          const tar = params[0];
          return `内镜总量:${tar.value}`;
        },
      },
      xAxis: {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '',
          label: {
            show: true,
            position: 'inside',
            formatter: '{c}',
            color: '#ffffff',
            fontSize: 12,
          },
          data: [
            this.getValBy({ key: 'jan_count' }),
            this.getValBy({ key: 'feb_count' }),
            this.getValBy({ key: 'mar_count' }),
            this.getValBy({ key: 'apr_count' }),
            this.getValBy({ key: 'may_count' }),
            this.getValBy({ key: 'jun_count' }),
            this.getValBy({ key: 'jul_count' }),
            this.getValBy({ key: 'aug_count' }),
            this.getValBy({ key: 'sept_count' }),
            this.getValBy({ key: 'oct_count' }),
            this.getValBy({ key: 'nov_count' }),
            this.getValBy({ key: 'dec_count' }),
          ],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
        },
      ],
    };
    return (
      <div>
        <Col span={24}>
          <ChartTitle>
            <div>
              <span className={'label'}>{this.getValBy({ key: 'org_name' })}</span>
              <Icon
                type="info-circle"
                className={'previewIcon'}
                onClick={this.handleItemClick}
              />
            </div>
            <span className={'subLabel'}>{`${this.getValBy({
              key: 'upload_year',
            })}年度 ${this.getValBy({
              key: 'province_name',
            })} ${this.getValBy({ key: 'city_name' })} ${this.getValBy({
              key: 'region_name',
            })}`}</span>
          </ChartTitle>
          <ReactECharts
            option={echartOptions}
            style={{
              height: '260px',
            }}
          />
        </Col>
      </div>
    );
  }

  // 点击
  handleItemClick = () => {
    const { onItemClick, record } = this.props;
    if (onItemClick) {
      onItemClick(record);
    }
  };

  getValBy = ({ key }) => {
    const { record } = this.props;
    if (record[key]) {
      return record[key];
    } else {
      return '';
    }
  };
}

export default BarChartView;
